<template>
  <el-table :data="voluList" stripe style="width: 100%">
    <el-table-column prop="vtitle" width="120px" label="标题" #default="scope">
      <el-link @click="toDetail(scope.row.vid)">{{ scope.row.vtitle }}</el-link>
    </el-table-column>
    <el-table-column prop="vsubhead" label="副标题"/>
    <el-table-column prop="createdate" label="创建时间" width="170px"/>
    <el-table-column prop="vstatus" label="状态" #default="scope">
      {{
        scope.row.vstatus === 1 ? '正在审核' : scope.row.vstatus === 2 ? '正在征集' : scope.row.vstatus === 3 ? '已结束' : '其他'
      }}
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="180px">
      <template #default="scope">
        <el-button v-if="scope.row.vstatus !== 1" @click="flagEnd(scope.row.vid)" type="primary" size="small"
                   round>结束
        </el-button>
        <el-button v-if="scope.row.vstatus !== 1" @click="showApply(scope.row.vid)" type="success" size="small"
                   round>查看报名
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  分页-->
  <div class="pageBox">
    <el-pagination
        :page-size="5"
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        v-model:current-page="nowPage"
        @update:current-page="getData"
    />
  </div>

  <!--显示报名人数弹窗-->
  <el-dialog
      v-model="dialogApply"
      title="报名信息"
      width="30%"
      height="500px"
  >
    <div>共计报名人数：{{ chTotal }}人</div>
    <el-table :data="applyList" stripe style="width: 100%">
      <el-table-column prop="user.urealname" label="姓名" width="100px"/>
      <el-table-column prop="createdate" label="报名时间" width="200px"/>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button v-if="scope.row.vpstatus === 1" @click="changeStatus(scope.row,2)" type="primary" size="small"
                     round>标记未到
          </el-button>
          <el-button v-if="scope.row.vpstatus === 2" @click="changeStatus(scope.row,1)" type="success" size="small"
                     round>标记已到
          </el-button>
        </template>

      </el-table-column>
    </el-table>
    <!--  分页-->
    <div class="pageBox">
      <el-pagination
          :page-size="5"
          small
          background
          layout="prev, pager, next"
          :total="chTotal"
          class="mt-4"
          v-model:current-page="chNowPage"
          @update:current-page="getChData()"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeLog">取消</el-button>
        <el-button type="primary" @click="closeLog">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "CreateVolunte",
  data() {
    return {
      dialogApply: false,
      voluList: [],
      nowPage: 1,
      total: 0,
      applyList: [],
      chNowPage: 1,
      chTotal: 0,
      tempVid: null,
    }
  },
  methods: {
    getData() {
      doThis.doGet("/volunteer/findByUser", {pageNum: this.nowPage}).then(res => {
        this.voluList = res.data.list
        this.total = res.data.count
      })
    },
    getChData() {
      doThis.doGet("/VoluPeo/showApply", {pageNum: this.chNowPage, vid: this.tempVid}).then(res => {
        console.log(res)
        this.applyList = res.data.list
        this.chTotal = res.data.count
      })
    },
    flagEnd(vid) {
      if (confirm("确定活动已结束吗？")) {
        doThis.doGet("/volunteer/flagEnd", {vid: vid}).then(res => {
/*          alert(res.msg)
          if (res.code === '0') {

          }*/
          if (res.code === "0") {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            this.getData()
          }else {
            ElMessage.error(res.msg)
          }
        })
      }
    },
    showApply(vid) {
      this.tempVid = vid
      this.dialogApply = true
      this.getChData()
    },
    changeStatus(row, status) {
      if (confirm("确定要操作码？")) {
        doThis.doGet("/VoluPeo/updSta", {vpid: row.vpid, status: status}).then(res => {
          if (res.code === '0') {
            this.getChData()
          }
        })
      }

    },
    closeLog() {
      this.dialogApply = false
      this.applyList = []
    },
    toDetail(vid){
      this.$router.push("/front/volunteerDetail/"+vid)
    }
  },

  mounted() {

    this.getData()
  }
}
</script>

<style>

</style>